import { defineComponent, ref } from "vue";
import styles from "./insure.module.scss";
import Publicize from "./Publicize/Publicize";
import PlanDetail from "./PlanDetail/PlanDetail";
import Tabs from "./Tabs/Tabs";
import Insure from "./Insure/Insure";

import RecordingPrompt from "./RecordingPrompt/RecordingPrompt";
import Footer from "./Footer/Footer";
export default defineComponent({
  setup() {
    const insureRef = ref(null as any);
    const tabs_default = [
      {
        name: '我要参保',
        el: () => (
          <div style={{ paddingTop: "40px", marginTop: "-40px" }}>
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/insure-title.jpg")} />
            <Insure ref={insureRef} />
          </div>
        )
      },
      {
        name: '产品特色',
        el: () => (
          <div style={{ paddingTop: "40px", marginTop: "-40px" }}>
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/feature-title.jpg")} />
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/feature.jpg")} />
          </div>
        )
      },
      {
        name: '理赔案例',
        el: () => (
          <div style={{ paddingTop: "40px", marginTop: "-40px" }}>
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/example-title.jpg")} />
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/example.jpg")} />
          </div>
        )
      },
      {
        name: '常见问题',
        el: () => (
          <div style={{ paddingTop: "40px", marginTop: "-40px" }}>
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/problem-title.jpg")} />
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/problem.jpg")} />
          </div>
        )
      },
    ]
    // tab栏配置
    const tabs = ref(tabs_default);
    const planDetailRef = ref(null as any);
    return () => (
      <>
        <div class={styles.insure}>
          <div class={styles.container} id="scroll">
            <Publicize />
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/ads.jpg")} />
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/plans-title.jpg")} onClick={() => { planDetailRef.value.open() }} />
            <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/plans.jpg")} />
            <Tabs list={tabs.value} />
          </div>
          <Footer total_price={insureRef?.value?.total_price}/>
          <RecordingPrompt />
        </div>
        <PlanDetail ref={planDetailRef} />
      </>
    )
  }
})